<template>
  <div>
    <div class="title">筛选条件配置</div>
    <div class="filter_contianer">
      <div class="filter_row">
        <div class="filter_item">
          <span class="filter_label">元素类型</span>
          <div class="element_filter">
            <div
              v-for="(item, index) of valueRowData"
              :key="index"
              class="value-item"
            >
              <span>
                <img
                  style="margin-right: 4px; height: 16px"
                  :src="item.icon"
                />
                <span v-if="item.name">{{ locale.getTByKey(`modelConfig.${item.name}`, item.name) }}</span>
              </span>
            </div>
            <div
              v-if="!diagramCustomizationManagementModel.isModelDisabled"
              class="add-btn"
            >
              <img
                src="statics/icons/app/iconmore.png"
                class="g-pointer"
                @click="handleChooseType()"
              />
            </div>
          </div>
        </div>
        <div class="filter_item">
          <span class="filter_label">关系类型</span>
          <div class="element_filter">
            <div class="value-item">
              <span>
                {{ relationCriterionView }}
              </span>
            </div>
            <div
              v-if="!diagramCustomizationManagementModel.isModelDisabled"
              class="add-btn"
            >
              <img
                src="statics/icons/app/iconmore.png"
                class="g-pointer"
                @click="handleAdd"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { modelService } from "@/modules/model/service";
import { ModelData } from "@/constants/types";
import { computed, ref, watch } from "vue";
import { modelTreeSelectWindow } from "../../../modelTreeSelect";
import { relationCriteriaWindow } from "../../../relationCriteria";
import { DiagramCustomizationManagementModel } from "../../DiagramCustomizationManagementModel";
import { locale } from "@/util/locale";
import { parseRC2Form } from "@/util/relationCriteria";
import { RelationCriteriaType } from "@/constants/Enums";

const props = defineProps<{
  diagramCustomizationManagementModel: DiagramCustomizationManagementModel;
}>();

const valueRowData = ref<ModelData[]>([]);

const diagramMapModel = computed(() => props.diagramCustomizationManagementModel.diagramMapConfigurationModel);

watch(
  () => diagramMapModel.value.elementIds,
  newVal => {
    modelService
      .getModelDatas(props.diagramCustomizationManagementModel.queryParams.projectId, newVal)
      .then(res => (valueRowData.value = res));
  },
  { immediate: true }
);

const handleChooseType = () => {
  modelTreeSelectWindow.popup(
    {
      loadMethod: "getElementsAndStereotypes",
      loadParams: JSON.stringify({
        row: {},
        projectId: props.diagramCustomizationManagementModel.queryParams.projectId
      }),
      checkedIds: [...diagramMapModel.value.elementIds],
      checkable: true,
      attrTip: "ElementType",
      title: "选择元素类型",
      delay: true
    },
    async data => {
      if (!data.success) return;
      diagramMapModel.value.elementIds = data.selectedId;
      modelTreeSelectWindow.done();
    }
  );
};

const relationCriterionView = ref<string>("");
watch(
  () => diagramMapModel.value.relationCriteria,
  newVal => {
    if (!newVal) return [];
    relationCriterionView.value = parseRC2Form(newVal);
  },
  { immediate: true }
);

const handleAdd = () => {
  relationCriteriaWindow
    .popup({
      projectId: props.diagramCustomizationManagementModel.queryParams.projectId,
      attrTip: "retrospectType",
      title: "关系类型",
      type: RelationCriteriaType.DIAGRAM_MAP_VIEW_CONFIG,
      relateModelIds: diagramMapModel.value.elementIds.join(","),
      viewData: diagramMapModel.value.relationCriteria,
      validType: valueRowData.value.map(it => it.id).join(",")
    })
    .then(async res => {
      if (!res.success) return;
      diagramMapModel.value.relationCriteria = res.relationCriteria as string;
    });
};
</script>
